/* eslint-disable import/no-absolute-path */
/* eslint-disable global-require */
/* eslint-disable import/no-absolute-path */
/* eslint-disable global-require */
<style lang="scss" >
@import '../styles/color.scss';
/*顶部*/
.home-header{
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  background: $primary-dark-color;
  .t-image--position-center{
    position: absolute;
  }
  .home-header-left {
    width: 210px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .home-header-left-content{
      margin-left: 35px;
      display: flex;
      align-items: center;
      .home-header-img {
        background: #fff;
        width: auto;
        height: 28px;
        border-radius: 5px;
        margin-right: 6px;
      }
      .home-header-txt {
        display: inline-block;
        text-align: center;
        height: 100%;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        zoom: 130%;
        font-weight: bold;
      }
    }
    // 伸缩按钮
    .btn-collapse{
      padding: 0;
      background: transparent;
      border: 0;
      i{
        color: #FFFFFF;
        font-size: 30px;
      }
    }
  }

  .home-header-menu-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;


    .el-submenu__title {
      color: #fff;
      i {
        color: #fff;
      }
    }
    .el-submenu__title:hover{
      background-color: $secondary-color;
      color: $font-active;
      i, i:hover {
        color: $font-active;
      }
    }

    el-submenu.is-opened{
      .el-submenu__title, .el-submenu__title:hover {
        color: $font-active;
        i, i:hover {
          color: $font-active;
        }
      }
    }


    .user-avator {
      width: 20px;
      height: 20px;
      margin-bottom: 5px;
    }

    .el-menu--vertical, .el-menu--horizontal{
      .el-menu-item{
        height: 40px !important;
        line-height: 40px !important;
      }

      //.el-menu--popup{
      //  .el-menu-item{
      //    background: #0c6ec9;
      //  }
      //}
    }
    .el-menu-item:hover,
    .el-submenu__title:hover,.el-submenu__title i:hover,.el-menu-item.is-active{
      background-color: $secondary-color;
      color: #FFFFFF;

      i,svg{
        color: #FFFFFF;
      }
    }

    .home-header-menu-full:hover {
      background-color: $secondary-color !important;
    }
    .home-header-menu-right-submenu .el-submenu__title{
      height: 40px !important;
      line-height: 40px !important;
    }
  }

}


</style>
<template>
  <div class="home-header" >
    <div class="home-header-left">
      <div class="home-header-left-content">
        <img :src="resources.logoBg()" class="home-header-img" />
        <span class="home-header-txt  flow-lignt"> 医疗协同</span>
      </div>
      <el-button class="btn-collapse" size="mini"   @click="handleOpen" >
        <i :class="{'el-icon-s-fold': isCollapse, 'el-icon-s-unfold': !isCollapse}"></i>
      </el-button>
    </div>

    <div class="home-header-menu-right   animated fadeInDown">
      <div class="home-header-menu">
        <el-menu   class="home-header-menu" mode="horizontal" >
          <el-menu-item index="12" >
            <template slot="title">
              <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                <i  @click="handleFullScreen">
                  <img src='../assets/img/home/icon_screen.png'   style="height: 15px" >
                </i>
              </el-tooltip>
            </template>
          </el-menu-item>

          <!--个人菜单-->
          <el-submenu index="15" class="home-header-menu-right-submenu">
            <template slot="title">
              <customImage :src="avatarUrl" :width="20" :height="20" style="display: inline-block;     background: transparent;" />
               {{username}}
            </template>

            <el-menu-item @click.native="handleCommand('changePassword')">
              <span slot="title">修改密码 </span>
            </el-menu-item>

            <el-menu-item @click.native="handleCommand('loginout')">
              <span slot="title">退出登录 </span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <!--修改密码-->
    <passwordDrawer ref="customDrawerPsd" />
  </div>

</template>
<script>
import passwordDrawer from '@/components/custom/bus/passwordDrawer'
import customImage from "@/components/custom/form/customImage.vue"

let settings = require('@/settings.js')

export default {
  name: 'Header',
  data() {
    return {
      collapse: false,
      isCollapse: true,
      fullscreen: false,
      dialogFormVisible: false,
      dialogSignVisible: false,
      //定时器是否开启
      isTimerBegin: false,
      timers: [],
      // eslint-disable-next-line global-require
      resources: require('@/settings.js').resources,
    }
  },
  components: {
    passwordDrawer, customImage
  },
  computed: {
    username() {
      const username = this.utils.getCurrentUser().nickname
      return username || this.name
    },
    avatarUrl() {
      let deptType = this.utils.getCurrentUser().deptType || ''
      let avatarUrl
      if (deptType == this.constCommon.deptType.hospital) {
        avatarUrl = require('@/assets/icon/dept/hp.png')
      } else if (deptType == this.constCommon.deptType.supplier) {
        avatarUrl = require('@/assets/icon/dept/sp.png')
      } else {
        avatarUrl = require('@/assets/icon/dept/so.png')
      }
      return avatarUrl
    }
  },
  methods: {
    handleOpen() {
      this.$emit('changeCollapse')
      this.isCollapse = !this.isCollapse
      window.menuIsCollapse = this.isCollapse
    },
    // dialogClose() {
    //   this.dialogFormVisible = false
    // },
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == 'loginout') {
        this.utilMessage.confirm('确定退出登录？', () => {
          this.loginout()
        })
      }

      if (command == 'changePassword') {
        // this.form = {}
        this.$refs.customDrawerPsd.show()
      }
      if (command == 'setSign') {
        this.dialogSignVisible = true
      }
    },
    dialogSignOpend() {
      this.$refs.userSign.setUserSign()
    },
    loginout() {
      /*eslint-disable*/
      this.utilVue.loadShow(true)
      this.$ajax.delete('/upms/logout').then(resp => {
        this.utilVue.loadHide()
        sessionStorage.clear()
        let loginForm = JSON.parse(localStorage.getItem('loginForm'))
        if (loginForm){
          loginForm.autologin = false
        }
        if (loginForm && !loginForm.rememberPassword){
          loginForm.password = ''
        }

        localStorage.setItem('loginForm', JSON.stringify(loginForm))
        global.utils.toLogin()
      })
    },
    // 全屏事件
    handleFullScreen() {
      const element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    },

    //开启定时器
    timerBegin(){
      if(this.isTimerBegin) return

      //及时通知
      this.getInnerInbox()
      let timer2 = setInterval(() =>{
        this.getInnerInbox()
      },settings.noticeRightTimeout );
      this.timers.push(timer2)

      this.isTimerBegin = true
    },

    //结束定时器
    timerEnd(){
      this.timers.forEach( time => {
        clearInterval(time)
      })
    },
    //打开消息
    openMsg(msgId){
      window.openMsg(msgId)
    },

    // 获取消息
    getInnerInbox() {
      this.$ajax.get('/msg/inner_inbox/msgUserTop1?currInnerNoticeId='+ ( window.currInnerNoticeId ? window.currInnerNoticeId : '')).then(resp => {
        if ( $('.msg-right').length > 0 && resp.code == 0 && window.currInnerNoticeId != null &&  resp.msg != '查询成功') {
          this.utilMessage.success(resp.msg)
        }
        if (resp.code == 0 && resp.data && resp.data.id ) {
          window.currInnerNoticeId = resp.data.innerNoticeId
          this.utilMessage.notifyHome(resp.data.title,resp.data.gmtCreate,  resp.data.content, true, () => {
            this.readMsg(resp.data.innerNoticeId)
          }, '已读');
        }
      })
    },

    // 读消息
    readMsg(msgId) {
      if (!window.currInnerNoticeId) return
      window.currInnerNoticeId = null
      global.$ajax.put(`/msg/inner_inbox/${msgId}/read`).then(resp => {
        if (resp.code == 0) {
          global.utilMessage.success(resp.msg)
        }
      })
    },
    syncMenuTimer() {
      //5分钟同步一下当前的菜单
      setInterval(this.syncMenu, 5000 * 60)
    },
    syncMenu() {
      this.utils.updateUserState('menu')
      this.utils.updateUserState('routeCurrent', this.$route.path)
    },
    // 1分钟同步一次用户状态
    syncUpdateUserStatePromiseListTimer() {
      setInterval(this.syncUpdateUserStatePromiseList, 1000 * 30)
    },
    // status wait doing
    syncUpdateUserStatePromiseList() {
      if (window.updateUserStatePromiseList && window.updateUserStatePromiseList.length > 0) {
        let waitList = window.updateUserStatePromiseList.filter(tmp => tmp.status == 'wait')
        if (waitList.length > 0) {
          let oneIndex = window.updateUserStatePromiseList.findIndex(tmp => tmp.id == waitList[0].id)
          window.updateUserStatePromiseList[oneIndex].status == 'doing'
          waitList[0].action().then(() => {
            window.updateUserStatePromiseList.splice(oneIndex, 1)
            // this.syncUpdateUserStatePromiseList()
          })
        }
      }
    },
    isDefaultPwd() {
      this.$ajax.get('/upms/users/isDefaultPwd').then(resp => {
        console.log('isDefaultPwd resp', resp)
        if (resp.success && true == resp.data) {
          this.$refs.customDrawerPsd.show()
          setTimeout(() => {
            this.utilMessage.warning('您使用的是默认密码，请尽快修改!')
          }, 2000)
        }
      })
    }
  },
  mounted() {
    //绑定菜单状态
    let userNavIsCollapseStorage = localStorage.getItem('userNavIsCollapse')
    if (userNavIsCollapseStorage !=undefined && userNavIsCollapseStorage == 'false') {
      this.isCollapse = false
      this.$emit('changeCollapse')
    }
    window.menuIsCollapse = this.isCollapse

    //打开消息
    window.openMsg = function(msgId) {
      global.utils.openMenu('innerinbox', {id: msgId})
    }
    window.getInnerInbox = this.getInnerInbox
    this.isDefaultPwd()
  },
  beforeDestroy() {
    this.timerEnd()
  },
  created() {
    this.syncMenuTimer()
    this.syncUpdateUserStatePromiseListTimer()
  }
}
</script>
